<template>
    <div class="vertical-button-menu">
        <div class="v-b-m-title">
            {{title}}
        </div>
        <div class="v-b-m-content">
            <el-button v-for="(btn, index) in menuList" :key="index"
                :class="['v-b-m-content__item', 'jtyj-btn-other', { 'active-btn': activeIndex === index }]"
                @click.stop="selectButton(index)">
                {{ btn.label }}
            </el-button>
            <el-button v-if="showAddBtn" :class="['v-b-m-content__item', 'jtyj-btn-primary']" @click="addMenu">+</el-button>
        </div>
    </div>

</template>

<script>
export default {
    name: "VerticalButtonMenu",
    props: {
        title: {
            type: String,
            default: ""
        },
        menuList: {
            type: Array,
            default: () => []
        },
        showAddBtn: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            activeIndex: 0
        };
    },
    methods: {
        selectButton(index) {
            this.activeIndex = index;
            this.$emit("select", index);
        },
        addMenu() {
            this.$emit("addMenu");
        },
    }
}
</script>

<style lang="scss" scoped>
.vertical-button-menu {
    width: 170px;
    display: flex; 
    flex-direction: column; 
    .v-b-m-title {
        display: flex;
        justify-content: center;
        height: 35px;
        font-weight: var(--ui-font-weight-semibold);
        letter-spacing: 2px;
        margin-bottom: 10px;
        flex-shrink: 0;
    }

    .v-b-m-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        flex-grow: 1;
        overflow: auto;

        .v-b-m-content__item {
            margin-left: 0px;
            height: 40px;
            min-height: 40px;
            width: 150px;
            flex-shrink: 0;
        }

        .active-btn {
            border-color: var(--ui-input-hover-border-color);
            background-color: transparent;
        }
    }
}
</style>